<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="12" class="block-container" id="canvasContainer">
        <canvas id="canvas"></canvas>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>
<script>
import * as zrender from 'zrender';
export default {
  methods: {
    dcInit() {
      /**
       * @type {HTMLElement}
       */
      const parentDom = document.getElementById('canvas').parentElement;
      const width = parentDom.clientWidth;
      const height = parentDom.clientHeight;
      /**
       * @type {HTMLCanvasElement}
       */
      const canvas = document.getElementById('canvas');
      canvas.height = height;
      canvas.width = width;
      const zr = new zrender.init(canvas);
      const axisLineWidth = 2;
      const axisTickWidth = 4;
      const axisTickHeight = 6;
      const padding = [40, 20];
      const lineNumber = 5;
      const lineHeightStep = (height - padding[0] * 2) / 4;
      const lineWidthStep = (width - padding[1] * 2) / 3;
      const tickLabels = [[]];
      let lines = [];
      for (let i = 0; i < 5; i++) {
        lines.push({
          shape: {
            points: [
              [padding[1], lineHeightStep * i + padding[0]],
              [width - padding[1], lineHeightStep * i + padding[0]],
            ],
          },
          style: {
            lineWidth: axisLineWidth,
          },
        });
        for (let k = 0; k < 4; k++) {
          lines.push({
            shape: {
              points: [
                [
                  lineWidthStep * k + padding[1],
                  lineHeightStep * i + padding[0] - axisTickHeight,
                ],
                [
                  lineWidthStep * k + padding[1],
                  lineHeightStep * i + padding[0],
                ],
              ],
            },
          });
        }
      }
      lines.forEach((line) => {
        zr.add(new zrender.Polyline(line));
      });
      console.log(lines);
    },
  },
  mounted() {
    this.dcInit();
  },
};
</script>

<style>
.block-container {
  height: 300px;
}
</style>

